<template>
  <div class="app-container">
    <div style="margin-bottom: 20px">
      <el-button @click="edit(null)">新增</el-button>
    </div>
    <u-table v-loading="loading" beautifyTable inverse-current-row header-drag-style :data="tableData"
      :pagination-show="true" :total="pageForm.total" :page-size="pageForm.pageSize" :current-page="pageForm.currentPage"
      @handlePageSize="handlePageSize" :max-height="height">
      <u-table-column prop="name" label="银行">
        <template slot-scope="scope">
          {{ scope.row.code + '-' + scope.row.name }}
        </template>
      </u-table-column>
      <u-table-column prop="type" label="协议类型" width="150"></u-table-column>
      <u-table-column prop="port" label="服务端口" width="150"></u-table-column>
      <u-table-column prop="charset" label="字符集" width="150"></u-table-column>
      <u-table-column prop="status" label="运行状态" width="120"></u-table-column>
      <u-table-column prop="path" label="JS脚本目录" width="150" />
      <u-table-column fixed="right" label="操作" width="160">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
          <el-popconfirm title="确定删除吗？">
            <el-button slot="reference" type="text" size="small" @click="del(scope.row)">删除</el-button>
          </el-popconfirm>
          <el-button type="text" size="small" @click="start(scope.row)">启动</el-button>
          <el-button type="text" size="small" @click="stop(scope.row)">停止</el-button>
        </template>
      </u-table-column>
    </u-table>
    <edit ref="edit" @ok="handleOk"></edit>
  </div>
</template>

<script>
export default {
  components: {
    edit: lazyImport('/views/bank/edit'),
  },
  data() {
    return {
      loading: false,
      height: 300,
      pageForm: {
        total: 0,
        pageSize: 10,
        currentPage: 1
      },
      tableData: []
    }
  },
  mounted() {
    // 不使用分页  下面的这个计算是（假装给个示例）。请结合自己情况去计算，
    // 比如我一个页面有头部，表单高级搜索等盒子，那么我这里就这样计算 : 表格高度 =  浏览器的窗口高度 - 我的头部盒子高度 - 表单高级搜索高度
    // this.height = 浏览器的窗口高度  - (this.$refs.goodsIndex.offsetHeight - this.$refs.OrderSearch.offsetHeight)
    this.height = window.innerHeight - 50
    // 使用分页你得这样去计算高度。加个延迟
    setTimeout(() => {
      // 比如我一个页面有头部，表单高级搜索等盒子，那么我这里就这样计算 : 表格高度 =  浏览器的窗口高度 - 我的头部盒子高度 - 表单高级搜索高度
      // this.height = 浏览器的窗口高度  - (this.$refs.goodsIndex.offsetHeight - this.$refs.OrderSearch.offsetHeight)
      this.height = window.innerHeight - 50
    })
    // 有了这个是是不是可以实现拖动浏览器宽度去，更新表格高度啦？做响应式  如
    // 监听窗口变化， 这个代码写app.vue入口里面
    window.onresize = () => {
      obj = {
        h: window.innerHeight,
        w: window.innerWidth
      }
      // SETscreen就是vuex中的Mutation中的方法
      this.SETscreen(obj) // 然后把这个存到vuex中。如果页面中有表格就去监听这个变化
    }
  },
  // 监听窗户高度变化，假如这个是我某个页面使用了表格
  watch: {
    // 获取vuex中的screenObj对象，进行监听
    screenObj(val) {
      // 下面的这个计算是（假装给个示例）
      // 比如我一个页面有头部，表单高级搜索等盒子，那么我这里就这样计算 : 表格高度 =  浏览器的窗口高度 - 我的头部盒子高度 - 表单高级搜索高度
      // this.height = 浏览器的窗口高度  - (this.$refs.goodsIndex.offsetHeight - this.$refs.OrderSearch.offsetHeight)
      this.height = window.innerHeight - 50
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.loading = true
      var _this = this
      request({
        method: 'post',
        url: '/bank/list',
        data: this.pageForm,
      }).then(function (res) {
        _this.loading = false
        if (res.status === 200) {
          _this.tableData = res.data.list
          _this.pageForm.total = res.data.total
          _this.pageForm.currentPage = res.data.page
          _this.pageForm.pageSize = res.data.total
        }
      })
    },
    handlePageSize({ page, size }) {
      console.log(page, size)
    },
    edit: function (row) {
      this.$refs.edit.show(row)
    },
    del: function (row) {
      var _this = this
      request({
        method: 'get',
        url: '/bank/delete?id=' + row.id,
      }).then(function (res) {
        if (res.status === 200) {
          _this.banks = res.data
          _this.$message({ message: '操作成功', type: 'success' });
        }
      })
    },
    handleOk() {
      this.fetchData()
    },
    start(row) {
      request({
        method: 'get',
        url: '/bank/start?id=' + row.id,
      }).then(function (res) {
        if (res.status === 200) {
          _this.banks = res.data
          _this.$message({ message: '操作成功', type: 'success' });
        }
      })
    },
    stop(row) {
      request({
        method: 'get',
        url: '/bank/stop?id=' + row.id,
      }).then(function (res) {
        if (res.status === 200) {
          _this.banks = res.data
          _this.$message({ message: '操作成功', type: 'success' });
        }
      })
    },
  }
}
</script>
